<template>
  <div id="transfer-history">
    <div v-if="!isWX" class="bra"></div>
    <!-- 内容区域 -->
    <div class="wrapper">
      <!-- 返回按钮 -->
      <div class="back_part">
        <div class="back_btn" @click="goBack">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>

      <div class="contentContainer">
        <!-- 标题 -->
        <!-- <div class="contentTitle">
          <div class="contentTitle_left">转赠记录</div>
        </div> -->

        <!-- 列表类型 -->
        <div class="contentType">
          <div class="contentType_left">
            <el-tabs v-model="listType" @tab-click="handlelistTypeClick">
              <el-tab-pane label="藏品" name="1">藏品</el-tab-pane>
              <el-tab-pane label="合成碎片" name="0.5">合成碎片</el-tab-pane>
              <el-tab-pane label="勋章" name="1.5">勋章</el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!-- 内容 -->
        <div class="contentBody">
          <ul>
            <li class="contentItem" v-for="(item, index) in currentData" :key="index">
              <div class="contentItemTitle">
                <span>订单号：{{ item.order_sn }}</span>
                <span>{{ item.status_name ? item.status_name : statusName(item.status) }}</span>
              </div>
              <div class="contentItemDesc">
                <div class="desc_left">
                  <img v-if="item.images" :src="show_url + item.images[0]" />
                  <img v-else :src="show_url + item.icon" />

                  <div class="desc_content">
                    <div class="dc_firstLine">
                      <div class="dc_title">
                        <template v-if="item.goods_name">
                          {{ titleSubstring(item.goods_name) }}
                        </template>
                        <template v-else>
                          {{ item.name }}
                        </template>
                      </div>
                      <div class="dc_desc">
                        {{ descSubstring(item.goods_desc) }}
                      </div>
                    </div>
                    <div class="dc_price" v-if="item.price">
                      <span class="yang">¥</span>
                      {{ item.price }}
                    </div>
                    <span class="noPrice" v-else>--</span>
                  </div>
                </div>

                <button class="desc_right" @click="gotoProductDetail(item)">
                  查看藏品
                </button>
              </div>
            </li>
          </ul>
          <div class="noneTip" v-if="currentData.length <= 0">
            <img class="noneTip_img" src="@/assets/images/mobile_black/center/null.png" />
            <div class="noneTip_txt">暂无已转赠的记录哦～</div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pag" v-if="currentData.length > 0">
          <ElPage
            @handleCurrentChange="handleCurrentChange"
            :total="total"
            :pageSizes="pageSizes"
          />
        </div>
      </div>
    </div>

    <!-- mobile -->
    <div class="mobile">
      <mescroll-vue
        id="personalCurrentlyOwnedMescroll2"
        ref="mescroll"
        :down="mescrollDown"
        :up="mescrollUp"
        @init="mescrollInit"
      >
        <div class="contentType">
          <el-tabs v-model="listType" @tab-click="handlelistTypeClick">
            <el-tab-pane label="藏品" name="1">藏品</el-tab-pane>
            <el-tab-pane label="碎片" name="0.5">碎片</el-tab-pane>
            <el-tab-pane label="勋章" name="1.5">勋章</el-tab-pane>
          </el-tabs>
        </div>

        <div class="productGroup" :class="{ topBrace: isWX }">
          <div class="order-item" v-for="(item, index) in currentData" :key="index">
            <div class="order-item-top">
              <span>订单号：{{ item.order_sn }}</span>
              <span>{{ item.status_name ? item.status_name : statusName(item.status) }}</span>
            </div>

            <div class="order-item-center">
              <img v-if="item.images" :src="show_url + item.images[0]" />
              <img v-else :src="show_url + item.icon" />

              <div class="orderInfo">
                <p>
                  <span>
                    <template v-if="item.goods_name">
                      {{ titleSubstring(item.goods_name) }}
                    </template>
                    <template v-else>
                      {{ item.name }}
                    </template>
                  </span>

                  <span v-if="item.goods_desc">
                    {{ descSubstring(item.goods_desc) }}
                  </span>
                </p>
                <p v-if="item.price">
                  <span>¥</span><span>{{ item.price }}</span>
                </p>
                <p v-else style="color:#999">--</p>
              </div>
            </div>

            <div class="order-item-bottom">
              <el-button class="orderClick" @click="gotoShowCollection(item)">查看藏品</el-button>
            </div>
          </div>
        </div>
      </mescroll-vue>

      <div class="nullBox" v-if="currentData.length <= 0">
        <img src="@/assets/images/mobile_black/center/null.png" />
        <p>暂无已转赠的记录哦～</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";
import { Pagination, ElPage } from "@/components";
// --- api ---
import { getMyOrderListApi, transforeRecordApi } from "@/api";
// --- utils ---
import { iscode, isWeixin, escapeHTML, isPhone } from "@/utils";

export default {
  name: "TransferHistory",
  components: { Pagination, ElPage, MescrollVue },
  data() {
    return {
      // 是否是微信
      isWX: false,
      // 当前拥有的商品
      currentData: [],
      currentData1: [],
      // 当前默认页
      currentPage: 1,
      // 每页显示多少条
      perPage: 4,
      // 总量
      total: 0,
      // 图片地址
      show_url: "",
      mescroll: null, // mescroll实例对象
      mescrollDown: { use: false }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        auto: false,
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10 //每页数据条数,默认10
        },
        htmlNodata:
          '<p class="upwarp-nodata" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">-- 没有更多了 --</p>',
        htmlLoading:
          '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip" style="font-size: 0.14583rem;font-family: Microsoft YaHei;font-weight: 600;color: #808080;">加载中..</p>',
        noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
        isBounce: false
      },
      pageSizes: [4],
      // 当前拥有卡片列表类型（1是当前拥有，0.5是合成碎片）
      listType: "1"
    };
  },
  computed: {
    // 用户信息
    ...mapState(["userInfo"])
  },

  beforeRouteEnter(to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
    });
  },
  beforeRouteLeave(to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
    // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
    next();
  },
  beforeCreate() {
    this.listType = "1";
  },
  created() {
    if (isWeixin()) {
      this.isWX = true;
    } else {
      this.isWX = false;
    }
  },
  mounted() {
    this.getMyOrderList();
  },
  methods: {
    // -----异步相关方法-----
    // 获取藏品列表
    async getMyOrderList() {
      // 判断是否时下拉刷新，如果是则清空原数据
      let result = await getMyOrderListApi({
        page: this.currentPage,
        pagesize: this.perPage,
        status: 3 //"status":-1 已取消 1已支付 0未支付, 不传该字段为全部
      });
      if (iscode(result)) {
        this.show_url = result.result.show_url;
        this.total = result.result.count;
        this.currentData = result.result.list;
      }
    },
    // 获取碎片列表
    async transforeRecord() {
      const res = await transforeRecordApi({
        page: this.currentPage,
        pagesize: this.perPage
      });
      if (iscode(res)) {
        this.show_url = res.result.show_url;
        this.total = res.result.count;
        this.currentData = res.result.list;
        this.currentData.map(item => {
          this.$set(item, "goods_desc", item.intro);
        });
      }
    },
    // 获取勋章列表
    async getMedalList() {
      const res = await getMyOrderListApi({
        page: this.currentPage,
        pagesize: this.perPage,
        status: 11
      });
      const resData = res.result;
      this.show_url = resData.show_url;
      this.total = resData.count;
      this.currentData = resData.list;
    },

    // 上拉加载
    async upCallback(page, mescroll) {
      this.mescroll = mescroll;
      let result = null;
      if (this.listType === "1") {
        result = await getMyOrderListApi({
          page: page.num,
          pagesize: page.size,
          status: 3 //"status":-1 已取消 1已支付 0未支付, 不传该字段为全部
        });
      } else if (this.listType === "0.5") {
        result = await transforeRecordApi({
          page: page.num,
          pagesize: page.size
        });
      } else if (this.listType === "1.5") {
        result = await getMyOrderListApi({
          page: page.num,
          pagesize: page.size,
          status: 10
        });
      }

      if (iscode(result)) {
        let resData = result.result.list;
        // 如果是第一页需手动置空列表
        if (page.num === 1) {
          this.currentData = [];
        }
        // 把请求到的数据添加到列表
        this.currentData = [...this.currentData, ...resData];

        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          this.mescroll.endSuccess(resData.length);
        });
      }
    },

    // -----功能性方法-----
    // status_name
    statusName(status) {
      let n = "";
      if (status == 0) {
        n = "掉落获取";
      } else if (status == 1) {
        n = "已消耗";
      } else if (status == 2) {
        n = "已转赠";
      } else if (status == 3) {
        n = "已接收";
      }
      return n;
    },
    // 切换listType tab栏
    handlelistTypeClick(tab, event) {
      if (isPhone()) {
        document.querySelector("#personalCurrentlyOwnedMescroll2").scrollTop = 0;
      }

      this.currentData = [];
      this.currentPage = 1;
      this.mescrollUp.page.num = 1;
      if (isPhone()) {
        tab.paneName == "1.5" ? (this.perPage = 12) : (this.perPage = 10);
        this.$nextTick(() => {
          this.mescroll.resetUpScroll();
        });
      } else {
        tab.paneName == "1.5" ? (this.perPage = 18) : (this.perPage = 4);
      }

      switch (tab.paneName) {
        case "1":
          this.getMyOrderList();
          break;
        case "0.5":
          this.transforeRecord();
          break;
        case "1.5":
          this.getMedalList();
          this.pageSizes = [18];
          break;
      }
    },
    // 切换页码
    handleCurrentChange(n) {
      // this.currentData = [];
      this.currentPage = n;
      if (this.listType === "1") {
        this.getMyOrderList();
      } else if (this.listType === "0.5") {
        this.transforeRecord();
      } else if (this.listType === "1.5") {
        this.getMedalList();
      }
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    titleSubstring(desc) {
      let res = desc;
      if (desc.length > 60) {
        res = desc.substring(0, 60) + "...";
      }
      return res;
    },
    descSubstring(desc) {
      let res = "";
      if (desc) {
        res = escapeHTML(desc);
      }
      let result = "";
      if (res.length > 30) {
        result = res.substring(0, 30) + "...";
        return result;
      } else {
        return res;
      }
    },
    // -----跳转相关的方法-----
    // 返回按钮触发返回到上个界面
    goBack() {
      this.$router.go(-1);
    },
    // 跳转到查看藏品界面
    gotoShowCollection(product) {
      if (product.icon) {
        this.$router.push({
          path: "/mail/hadPassOn",
          query: {
            order_id: product.id,
            icon: product.icon ? 1 : 0
          }
        });
      } else {
        this.$router.push({
          path: "/mail/hadPassOn",
          query: {
            id: product.goods_id,
            order_id: product.id
          }
        });
      }

      if (product.icon) {
        this.$set(product, "show_url", this.show_url);
        localStorage.setItem("fragInfo", JSON.stringify(product));
      }
    },
    // 跳转到查看藏品详情页界面
    gotoProductDetail(payload) {
      this.$router.push({
        path: "/personalCollectionPage",
        query: {
          order_id: payload.id ?? payload.id,
          status: payload.status,
          icon: payload.icon ? 1 : 0,
          dis: 1
        }
      });
      if (payload.icon) {
        this.$set(payload, "show_url", this.show_url);
        localStorage.setItem("fragInfo", JSON.stringify(payload));
      }
    }
  }
};
</script>

<style lang="less" scoped>
.w1190 {
  position: relative;
  max-width: 1190px;
  margin: 0 auto;
  padding-top: 20px;
}

.dis-flex {
  display: flex;
}

.f-y-center {
  align-items: center;
}

.f-x-center {
  justify-content: center;
}

.f-x-between {
  justify-content: space-between;
}

.mescrollBra {
  margin-top: 100px;
}

#transfer-history {
  width: 100%;
  min-height: 1080px;
  padding-bottom: 160px;

  .bra {
    display: none;
  }

  // 隐藏移动端
  .mobile {
    display: none;
  }

  // -版心
  .wrapper {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden; // bfa
  }

  .back_part {
    width: 100%;
    padding-top: 20px;

    .back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("../../../assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  // -内容总框
  .contentContainer {
    margin-top: 26px;
    width: 100%;

    // 内容标题样式
    .contentTitle {
      display: flex;
      justify-content: space-between;
      height: 22px;
      box-sizing: border-box;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: bold;
      color: #999999;
      font-size: 18px;

      .contentTitle_left {
        color: white;
      }

      .contentTitle_right {
        button {
          background: none;
          border: none;
          // border: 1px solid #00ffb0;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        button:hover {
          color: white;
        }
      }
    }

    .contentType {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // overflow: hidden;
      margin-top: 20px;

      /deep/.contentType_left {
        margin: 0;
        padding: 0;

        .el-tabs__header {
          padding: 0;
          margin: 0;
        }

        .el-tabs__content {
          display: none;
        }

        // 字体样式修改
        .el-tabs__item {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
        // 长下划线样式
        .el-tabs__nav-wrap::after {
          opacity: 0;
          height: 2px;
        }

        // 当前选中的字体
        .is-active {
          color: #ffffff;
        }
        // 当前选中下滑蓝边
        .el-tabs__active-bar {
          height: 2px;
          background: #00ffb0;
        }
      }

      .contentType_right {
        display: flex;
        align-items: center;
        height: fit-content;
        cursor: pointer;

        img {
          display: block;
          width: 14px;
          height: 14px;
          margin-right: 7px;
        }

        button {
          background: none;
          border: none;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #00ffb0;
          line-height: 14px;
          cursor: pointer;
        }
      }
    }

    // 具体内容样式
    .contentBody {
      width: 100%;
      min-height: 750px;
      padding-top: 20px;

      // 数据空时的提示语
      .noneTip {
        text-align: center;
        margin-top: 30px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        opacity: 0.6;
      }

      .noneTip_txt {
        width: 100%;
        font-size: 14px;
        color: #999;
        margin-top: 20px;
        text-align: center;
      }

      .noneTip_img {
        width: 260px;
      }

      // 去除默认样式
      ul,
      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      //每一项
      .contentItem {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 168px;
        background: #1e2020;
        padding: 0 20px;
        margin-bottom: 15px;

        .contentItemTitle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 42px;
          border-bottom: 1px solid #333333;

          span {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
          }

          span:nth-child(1) {
            color: #aaaaaa;
          }

          span:nth-child(2) {
            color: #ffffff;
          }
        }

        .contentItemDesc {
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-top: 15px;

          .desc_left {
            display: flex;
            align-items: center;

            img {
              width: 90px;
              height: auto;
              max-height: 90px;
            }

            .desc_content {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: 90px;
              padding: 0;
              margin-left: 20px;

              .dc_firstLine {
                .dc_title {
                  width: 300px;
                  font-size: 14px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 18px;
                  display: -webkit-box;
                  /* 将对象作为弹性伸缩盒子模型显示 */
                  // -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
                  // -webkit-line-clamp: 2; /* 2行，只有 webkit内核支持 */
                  word-break: break-all;
                  /* 纯英文换行 */
                  // overflow: hidden;
                }

                .dc_desc {
                  width: 300px;
                  height: 12px;
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #999999;
                  line-height: 12px;
                  // overflow: hidden;
                  // text-overflow: ellipsis;
                  white-space: nowrap;
                  margin-top: 10px;
                }
              }

              .dc_price {
                justify-self: flex-end;
                font-size: 18px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;
                line-height: 18px;
                margin-top: 17px;

                .yang {
                  font-size: 12px;
                }
              }

              .noPrice {
                font-size: 18px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #999999;
                line-height: 18px;
                margin-top: 17px;
              }
            }
          }

          .desc_right {
            display: flex;
            justify-content: center;
            align-items: center;
            background: none;
            border: none;
            width: 80px;
            height: 30px;
            border-radius: 2px;
            border: 1px solid #00ffb0;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00ffb0;
            line-height: 14px;
            margin-top: 32px;
            word-break: keep-all;
            cursor: pointer;
          }
        }
      }
    }

    // 底部分页
    .pag {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 23px;

      /deep/.pagination > .page-item.active > a {
        background-color: #0b81ef;
      }
    }
  }
}

// mobile (<=768px)
@media screen and (max-width: 768px) {
  #transfer-history {
    width: 100%;
    position: absolute;
    // top: 90px;
    bottom: 0;
    width: 100%;
    height: 100%;

    .bra {
      display: block;
      width: 100%;
      height: 90px;
    }

    // 隐藏pc端
    .back {
      display: none;
    }

    .wrapper {
      display: none;
    }

    .topBrace {
      // margin-top: 120px !important;
    }

    // mobile wrapper
    .mobile {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
      overflow: scroll;

      .van-list {
        width: 100%;
      }

      /*通过fixed固定mescroll的高度*/
      .mescroll {
        position: fixed;
        left: 0;
        top: 0;
        top: 0;
        bottom: 0;
        height: auto;
        scroll-behavior: smooth;
      }

      /deep/.contentType {
        display: flex;
        align-items: flex-end;
        height: 90px;
        padding-bottom: 20px;
        position: fixed;
        left: 0;
        top: 90px;
        width: 100%;
        background: #1e2020;
        z-index: 9;
        // padding-top: 124px;

        .el-tabs {
          width: 100%;
        }

        .el-tabs__header {
          display: flex;
          justify-content: center;
          width: 100%;
          padding: 0;
          margin: 0;
        }

        .el-tabs__content {
          display: none;
        }

        // 字体样式修改
        .el-tabs__item {
          // padding: 0 100px;
          padding: 0 80px;
          height: 52px;
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
        // 长下划线样式
        .el-tabs__nav-wrap::after {
          opacity: 0;
          height: 3px;
        }

        // 当前选中的字体
        .is-active {
          color: #ffffff;
        }
        // 当前选中下滑蓝边
        .el-tabs__active-bar {
          height: 3px;
          background: #00ffb0;
        }
      }

      .productGroup {
        width: 100%;
        margin-top: 220px;
        // margin-top: 135px;
        padding: 0 30px;

        // 每一条订单
        .order-item {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 408px;
          background: #2b2c2d;
          box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
          border-radius: 12px;
          margin-bottom: 30px;
          padding: 0 30px;

          // top
          .order-item-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 84px;
            border-bottom: 2px solid #333333;

            span {
              font-size: 24px;
              color: #aaaaaa;
              line-height: 24px;
            }

            span:nth-child(1) {
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              max-width: 80%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            span:nth-child(2) {
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
            }
          }

          // center
          .order-item-center {
            display: flex;
            align-items: center;
            height: 238px;
            border-bottom: 2px solid #333333;

            img {
              width: 180px;
              // height: 180px;
            }

            .orderInfo {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 30px;
              height: 180px;
              width: 420px;

              p {
                margin: 0;
              }

              p:nth-child(1) {
                display: flex;
                flex-direction: column;

                span:nth-child(1) {
                  width: 420px;
                  font-size: 28px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 36px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                span:nth-child(2) {
                  width: 420px;
                  font-size: 24px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #999999;
                  line-height: 24px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  margin-top: 20px;
                }
              }

              p:nth-child(2) {
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;
                line-height: 28px;

                span:nth-child(1) {
                  font-size: 20px;
                }

                span:nth-child(2) {
                  font-size: 24px;
                  margin-left: 3px;
                }
              }
            }
          }

          // bottom
          .order-item-bottom {
            position: relative;
            display: flex;
            align-items: center;
            height: 106px;

            .orderClick {
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              right: 0;
              width: 132px;
              height: 44px;
              border-radius: 4px;
              border: 1px solid #00ffb0;
              backdrop-filter: blur(3px);
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00ffb0;
              line-height: 24px;
              background: none;
            }
          }
        }
      }
    }

    // 数据空时的提示语
    .nullBox {
      margin: 194px auto 0 auto;

      img {
        width: 430px;
        height: 400px;
      }

      p {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 28px;
        margin-top: 50px;
        text-align: center;
      }
    }
  }
}

/deep/.van-list__finished-text,
/deep/.van-loading__text {
  font-size: 25px !important;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #808080;
  margin: 30px 0;
}
</style>
